<script>
    $(document).ready(function () {
        // Handler for .ready() called.

        const $toc = $('#toc-sidebar');

        $toc.toc({
            minimumHeaders: 2,
            title: '',
            listType: 'ul',
            showSpeed: 'none',
            headers: '.docs h2,.docs h3',
            classes: {
                list: 'toc-sidebar',
                item: 'toc-sidebar__item',
                link: 'toc-sidebar__item-link'
            }
        });

        if (!$.trim($toc.html())) {
            $toc.hide();
        }

        var section_classes = '.post-content h2, .post-content h3',
            sections = $(section_classes),
            visible_offset = 250,
            nav = $('.toc-sidebar'),
            nav_height = $('.header').outerHeight();

        $(window).on('scroll', function () {
            var cur_pos = $(this).scrollTop();

            sections.each(function (index, item) {
                var top = $(this).offset().top - nav_height - visible_offset,
                    bottom = top + $(this).outerHeight();

                const nextElement = $(this).nextAll(section_classes).first();
                if (nextElement && nextElement.length > 0) {
                    bottom = $(nextElement).offset().top - nav_height - visible_offset;
                }
                ;

                if (cur_pos >= top && cur_pos <= bottom) {
                    nav.find('a').removeClass('active');
                    sections.removeClass('active');

                    $(this).addClass('active');
                    nav.find('a[href="#' + encodeURI($(this).attr('id')) + '"]').addClass('active');
                }
            });
        });
    });

</script>

<div class="sidebar-page__title">{{ page.title }}</div>
<div id="toc-sidebar"></div>
